<script setup>
import moment from 'moment'
import { defineExpose } from 'vue'
const $moment = moment
defineExpose({
    $moment
})

const props = defineProps({
    msg: {
        type: Object,
        default: () => { }
    }
})
console.log(props.msg.type, 'props.msg');
// console.log(msg , 'msg');
const emit = defineEmits(['Pop'])
import closeImg from '@/assets/CloseIcon.svg'
import yujingxinxi from '@/assets/icon/yujingxinxi.svg'
import s1 from '@/assets/icon/s1.svg'
import s2 from '@/assets/icon/s2.svg'
import s3 from '@/assets/icon/s3.svg'
import s4 from '@/assets/icon/s4.svg'
import s5 from '@/assets/icon/s5.svg'
import location from '@/assets/icon/location.svg'
// import jie from '@/assets/icon/jiezhuangnuodong.svg'

const filtration = (noticeType, noticeLevel) => {
    let icon = ''
    if (noticeType == 2) {
        if (noticeLevel == 22) {
            icon = s1
        }
        if (noticeLevel == 21) {
            icon = s3
        }
    }
    if (noticeType == 1 || noticeType == 0) {
        if (noticeLevel == 13) {
            icon = s2
        }
        if (noticeLevel == 12) {
            icon = s4
        }
        if (noticeLevel == 11) {
            icon = s5
        }
    }

    return icon
}


const filtrationImg = (obj) => {
    let data = obj.attachments;
    let img = [];

    data.forEach(e => {
        img.push(e.attachmentUri)
    })

    return img
}

</script>
<template>
    <div class="RecentBox">
        <div class="RecentEvents">
            <div class="re_Title">
                <span class="s_til_l_t">{{ msg.pb.deviceName }}</span>
                <div class="re_close" @click.stop="emit('Pop', 1)">
                    <img :src="closeImg" alt="" style="width: .35rem;height: .35rem;">
                </div>
            </div>
            <div class="re_msg">
                <img :src="yujingxinxi" alt="">
                <span style="margin: 0 16px 0 8px;" class="span1">近期事件</span>
                <span style="color:#F93C3C;font-size: 26px;font-family:'MyFont';">{{ msg.pb.notices.length
                    }}</span>
            </div>
            <!-- 容器 B-->
            <div class="re_list">
                <!-- 鸟类 B-->
                <div class="re_birds" v-if="msg.type == '详情'" v-for="i in msg.pb.notices" :key="i.id">
                    <div class="s_til">
                        <div class="s_til_l">
                            <img class="s_til_l_m" :src="filtration(i.noticeType, i.noticeLevel)" alt="">
                            <span class="s_til_l_t">{{ i.title }}</span>
                            <span class="s_til_l_t" style="color: #3CEDFF;">{{ i.bizTag }}</span>
                        </div>
                        <div>
                            <span class="span1">{{ $moment(i.occurTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
                        </div>
                    </div>
                    <!-- <div style=""> -->
                          <audio :src="JSON.parse(i.bizContent).videoUrl" controls style="width: 100%;height: 54px;"></audio>
                    <!-- </div> -->
                  
                    <div class="s_lont">
                        <img :src="location" style="margin-right: 8px;" alt="">
                        <span class="span1">{{ i.lon }}，</span><span class="span1">{{ i.lat }}</span>
                    </div>
                </div>
                <!-- 鸟类 E-->
                <div class="re_jkl" v-if="msg.type == '鸟类详情'" v-for="i in msg.pb.notices" :key="i.id">
                    <div class="re_jkl_l" v-if="i.noticeType == 1">
                        <el-image style="width: 100%; height: 100%;"
                            v-if="JSON.parse(i.bizContent).attachments.length > 0"
                            :src="JSON.parse(i.bizContent).attachments[0].attachmentUri" :zoom-rate="1.2"
                            :preview-src-list="filtrationImg(JSON.parse(i.bizContent))" :initial-index="4"
                            fit="cover" />
                    </div>
                    <div class="re_jkl_l" v-else>
                        <video style="width: 100%;height: 100%;"
                            :src="JSON.parse(i.bizContent).discernPath == null ? JSON.parse(i.bizContent).videoUrl : JSON.parse(i.bizContent).discernPath"
                            controls></video>
                    </div>
                    <div class="re_jkl_r">
                        <div class="re_jkl_r_til">
                            <div class="s_til_l">
                                <img class="s_til_l_m" :src="filtration(i.noticeType, i.noticeLevel)" alt="">
                                <span class="s_til_l_t">{{ i.title }}</span>
                            </div>
                            <div>
                                <span>{{ $moment(i.occurTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
                            </div>
                        </div>
                        <div class="re_cedf" style="height: 63px;overflow: hidden;">
                            {{ i.bizTag }}
                        </div>
                        <div class="s_lont" style="margin-bottom: 0;">
                            <img :src="location" style="margin-right: 8px;" alt="">
                            <span class="span1">{{ i.lon }}</span>，<span class="span1">{{ i.lat }}</span>
                        </div>
                    </div>
                </div>
                <!-- 环境 B-->
                <!-- <div class="re_birds" v-if="msg.title == '环境监测'" v-for="i in msg.pb.notices" :key="i.id">
                    <div class="s_til">
                        <div class="s_til_l">
                            <img class="s_til_l_m" :src="filtration(i.noticeType, i.noticeLevel)" alt="">
                            <span class="s_til_l_t">{{ i.title }}</span>
                        </div>
                        <div>
                            <span>{{ $moment(i.occurTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
                        </div>
                    </div>
                    <div class="re_cedf">
                        {{ i.bizTag }}
                    </div>
                    <div class="s_lont">
                        <img :src="location" style="margin-right: 8px;" alt="">
                        <span>{{ i.lon }}</span>，<span>{{ i.lat }}</span>
                    </div>
                </div> -->
                <!-- 环境 E-->
                <!--  监控 B-->
                <!-- <div class="re_jkl" v-if="msg.title == '固定鸟类监控' || msg.title == '卡口监控' || msg.title == 'AR全景'"
                    v-for="i in msg.pb.notices" :key="i.id">
                    <div class="re_jkl_l" v-if="i.noticeType == 1">
                        <el-image style="width: 100%; height: 100%;" v-if="JSON.parse(i.bizContent).attachments.length > 0"
                            :src="JSON.parse(i.bizContent).attachments[0].attachmentUri" :zoom-rate="1.2"
                            :preview-src-list="filtrationImg(JSON.parse(i.bizContent))" :initial-index="4" fit="cover" />
                    </div>
                    <div class="re_jkl_l" v-else>
                        <video style="width: 100%;height: 100%;"
                            :src="JSON.parse(i.bizContent).discernPath == null ? JSON.parse(i.bizContent).videoUrl : JSON.parse(i.bizContent).discernPath"
                            controls></video>
                    </div>
                    <div class="re_jkl_r">
                        <div class="re_jkl_r_til">
                            <div class="s_til_l">
                                <img class="s_til_l_m" :src="filtration(i.noticeType, i.noticeLevel)" alt="">
                                <span class="s_til_l_t">{{ i.title }}</span>
                            </div>
                            <div>
                                <span>{{ $moment(i.occurTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
                            </div>
                        </div>
                        <div class="re_cedf" style="height: 63px;overflow: hidden;">
                            {{ i.bizTag }}
                        </div>
                        <div class="s_lont" style="margin-bottom: 0;">
                            <img :src="location" style="margin-right: 8px;" alt="">
                            <span>{{ i.lon }}</span>，<span>{{ i.lat }}</span>
                        </div>
                    </div>
                </div> -->
                <!--  监控 E-->
                <!-- 界桩 B-->
                <!-- <div class="re_jkl" v-if="msg.title == '电子界桩'" v-for="i in msg.pb.notices" :key="i.id">
                    <div style="display: flex;width: 100%;overflow: hidden;" v-if="JSON.parse(i.bizContent).eventId == 2">
                        <div class="re_jz_l">
                            <img :src="jie" style="margin-top: 20px;" alt="">
                            <div class="re_jz_l_t">
                                <div style="text-align: left;text-indent: 1em;"><span>位置变化:</span></div>
                                <span>{{ JSON.parse(i.bizContent).deviceLon }}~{{ JSON.parse(i.bizContent).deviceLat
                                }}</span>
                                <div> ⬇⬇⬇ </div>
                                <span>{{ JSON.parse(i.bizContent).lon }}~{{ JSON.parse(i.bizContent).lat }}</span>
                            </div>
                        </div>
                        <div class="re_jkl_r">
                            <div class="re_jkl_r_til">
                                <div class="s_til_l">
                                    <img class="s_til_l_m" :src="filtration(i.noticeType, i.noticeLevel)" alt="">
                                    <span class="s_til_l_t">{{ i.title }}</span>
                                </div>
                                <div>
                                    <span>{{ $moment(i.occurTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
                                </div>
                            </div>
                            <div class="re_cedf" style="height: 63px;overflow: hidden;">
                                位置变化：{{ JSON.parse(i.bizContent).distance }}m
                            </div>
                            <div class="s_lont" style="margin-bottom: 0;">
                                <img :src="location" style="margin-right: 8px;" alt="">
                                <span>{{ JSON.parse(i.bizContent).lon }}</span>，<span>{{ JSON.parse(i.bizContent).lat
                                }}</span>
                            </div>
                        </div>
                    </div>

                    <div style="display: flex;width: 100%;overflow: hidden;" v-if="JSON.parse(i.bizContent).eventId == 0">
                        <div class="re_jkl_l">
                            <el-image style="width: 100%; height: 100%;" :src="JSON.parse(i.bizContent).imageUrl"
                                :zoom-rate="1.2" :preview-src-list="[JSON.parse(i.bizContent).imageUrl]" :initial-index="4"
                                fit="cover" />
                        </div>
                        <div class="re_jkl_r">
                            <div class="re_jkl_r_til">
                                <div class="s_til_l">
                                    <img class="s_til_l_m" :src="filtration(i.noticeType, i.noticeLevel)" alt="">
                                    <span class="s_til_l_t">{{ i.title }}</span>
                                </div>
                                <div>
                                    <span>{{ $moment(i.occurTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
                                </div>
                            </div>
                            <div class="re_cedf" style="height: 63px;overflow: hidden;">
                                {{ i.bizTag }}
                            </div>
                            <div class="s_lont" style="margin-bottom: 0;">
                                <img :src="location" style="margin-right: 8px;" alt="">
                                <span>{{ i.lon }}</span>，<span>{{ i.lat }}</span>
                            </div>
                        </div>
                    </div>

                    <div style="width: 100%;overflow: hidden;"
                        v-if="JSON.parse(i.bizContent).eventId == 3 || JSON.parse(i.bizContent).eventId == 1">
                        <div class="s_til">
                            <div class="s_til_l">
                                <img class="s_til_l_m" :src="filtration(i.noticeType, i.noticeLevel)" alt="">
                                <span class="s_til_l_t">{{ i.title }}</span>
                            </div>
                            <div>
                                <span>{{ $moment(i.occurTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
                            </div>
                        </div>
                        <div class="re_cedf">
                            {{ i.bizTag }}
                        </div>
                        <div class="s_lont">
                            <img :src="location" style="margin-right: 8px;" alt="">
                            <span>{{ i.lon }}</span>，<span>{{ i.lat }}</span>
                        </div>
                    </div>
                </div> -->
                <!-- 界桩 E-->
            </div>
            <!-- 容器 E-->
        </div>
    </div>
</template>

<style scoped>
.RecentBox {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.RecentEvents {
    width: 12rem;
    height: 8rem;
    background: rgba(5, 37, 72, 0.70);
    box-shadow: 0px 0px 30px 0px rgba(67, 181, 246, 1) inset;
    overflow: hidden;
}

.re_Title {
    width: 100%;
    height: .5rem;
    position: relative;
    padding-left: .24rem;
    display: flex;
    align-items: center;
    font-size: .26rem;
    font-family: var(--font-title);
    background-image: url('../../assets/ico/dingbu.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

.re_close {
    position: absolute;
    top: -2px;
    right: 0;
    z-index: 2;
    cursor: pointer;
}

.re_msg {
    width: 100%;
    height: .8rem;
    padding-left: .24rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    background: rgba(67, 181, 246, 0.10);
    box-shadow: 0px 0px 30px 0px rgba(67, 181, 246, 0.60) inset;
}

.re_list {
    width: 100%;
    padding: 0 .32rem;
    height: calc(100% - 1.4rem);
    overflow-x: hidden;
    overflow-y: auto;

}


/* Webkit浏览器（Chrome、Safari等） */
.re_list::-webkit-scrollbar {
    width: .03rem;
}

.re_list::-webkit-scrollbar-thumb {
    background-color: rgba(186, 230, 255, 0.8);
}

.re_list::-webkit-scrollbar-track {
    background-color: rgba(186, 230, 255, 0.2);
}

/* Firefox浏览器 */
.re_list::-moz-scrollbar {
    width: .03rem;
}

.re_list::-moz-scrollbar-thumb {
    background-color: rgba(186, 230, 255, 0.8);
}

.re_list::-moz-scrollbar-track {
    background-color: rgba(186, 230, 255, 0.2);
}

/* IE浏览器 */
.re_list::-ms-scrollbar {
    width: .03rem;
}

.re_list::-ms-scrollbar-thumb {
    background-color: rgba(186, 230, 255, 0.8);
}

.re_list::-ms-scrollbar-track {
    background-color: rgba(186, 230, 255, 0.2);
}

.re_birds {
    border-bottom: 1px dashed rgba(230, 247, 255, 0.50);
    overflow: hidden;
}

.s_til {
    width: 100%;
    height: .74rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s_til_l {
    height: 100%;
    display: flex;
    align-items: center;
}

.s_til_l_m {
    width: .34rem;
    height: .34rem;
    margin-right: .08rem;
}

.s_til_l_t {
    margin-right: .24rem;
    font-size: .26rem;
    font-family: 'MyFont';
    color: #fff;
}

.s_lont {
    margin-top: .16rem;
    margin-bottom: .24rem;
    display: flex;
    align-items: center;
}

.re_cedf {
    color: #3CEDFF;
}

.re_jkl {
    display: flex;
    padding: .24rem 0;
    border-bottom: 1px dashed rgba(230, 247, 255, 0.50);
    overflow: hidden;
}

.re_jkl_l {
    width: 2rem;
    height: 1.5rem;
}


.re_jz_l {
    width: 2rem;
    height: 1.5rem;
    text-align: center;
    background: rgba(67, 181, 246, 0.10);
    box-shadow: 0px 0px 30px 0px rgba(67, 181, 246, 0.60) inset;
}

.re_jkl_r {
    width: calc(100% - 200px);
    padding-left: .24rem;
}

.re_jkl_r_til {
    width: 100%;
    margin-bottom: .16rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.re_jz_l_t {
    width: 100%;
    color: #3CEDFF;
    font-size: .12rem;
    margin-top: .05rem;
    overflow: hidden;
}

.span1 {
    color: #fff;
    font-size: .16rem;
}
</style>